<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root">
        <!--遍历数组-->
        <button @click.once="add">添加一个老刘</button>
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyword">
        <ul>
            <li v-for="(p,index) in filPersons":key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
                <input type="text" >
            </li>

        </ul>



    </div>
    <script src="../js/vue.js"></script>
    <script>
            Vue.config.productionTip=false//阻止vue启动时产生提示
            /*//用watch实现
            new Vue({
                 el: "#root",
                 data:{
                     keyword:"",
                      persons:[
                          {id:'001',name:'马冬梅',age:18,sex:"女"},
                          {id:'002',name:'周冬雨',age:20,sex:"女"},
                          {id:'003',name:'周杰伦',age:21,sex:"男"},
                          {id:'004',name:'温兆伦',age:22,sex:"男"}
                      ],
                     filPersons:[

                     ]
                    },
                 methods:{//方法
                     add(){
                         const p={id:'004',name:'老刘',age:40}
                         this.persons.unshift(p)
                     }

                 },
                 computed:{//计算

                 },
                 watch:{//监视
                    /!*keyword(val){
                        /!*console.log('keyword发生了改变',val)*!/
                        this.filPersons=this.persons.filter((p)=>{
                            return p.name.indexOf(val)!==-1;
                        })
                    }*!/
                     keyword: {
                         immediate: true,
                         handler(val) {
                             this.filPersons=this.persons.filter((p)=>{
                                 return p.name.indexOf(val)!==-1;
                             })
                         }
                     }
                 }
             })*/

            new Vue({
                el: "#root",
                data: {
                    keyword: "",
                    persons: [
                        {id: '001', name: '马冬梅', age: 18, sex: "女"},
                        {id: '002', name: '周冬雨', age: 20, sex: "女"},
                        {id: '003', name: '周杰伦', age: 21, sex: "男"},
                        {id: '004', name: '温兆伦', age: 22, sex: "男"}
                    ],
                },
                computed:{
                    filPersons(){
                        return this.persons.filter((p)=>{
                            return p.name.indexOf(this.keyword)!==-1;
                        })
                    }
                }
            })


    </script>
</body>
</html>